<template>
  <div>
    <!-- <el-button
      :disabled="selectedRows.length === 0"
      class="fr mb20"
      type="primary"
      @click="handlePrintMany"
    >连续打印</el-button>-->
    <e-table
      ref="eTable"
      @tableCheck="handleTableCheck"
      @getList="handleGetList"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :total="total"
    >
      <el-table-column slot="selection" align="center" type="selection" width="55" />
      <el-table-column slot="state" label="资产状态" width="80px" align="center">
        <template slot-scope="scope">
          <el-tag :type="stateType(scope.row.assetsState)">{{stateWord(scope.row.assetsState)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column slot="buyDate" label="购买日期" width="110px" align="center">
        <span slot-scope="scope">{{scope.row.buyDate ? formatY(scope.row.buyDate) : null}}</span>
      </el-table-column>
      <el-table-column slot="expireDate" label="到期日期" width="110px" align="center">
        <span slot-scope="scope">{{scope.row.expireDate ? formatY(scope.row.expireDate) : null}}</span>
      </el-table-column>
      <el-table-column slot="photo" label="照片" align="center">
        <template slot-scope="scope" v-if="scope.row.pictureUrl && scope.row.pictureUrl.length">
          <el-button
            type="text"
            size="small"
            @click="handlePreview( scope.row )"
          >{{ scope.row.pictureUrl.length }}张</el-button>
        </template>
        <span v-else>无</span>
      </el-table-column>
      <el-table-column slot="printTime" label="最后打印时间" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.printTime ? formatY(scope.row.printTime) : null }}</span>
        </template>
      </el-table-column>
      <el-table-column slot="action" fixed="right" width="50" align="center">
        <template slot-scope="scope">
          <el-dropdown>
            <a class="el-dropdown-link">
              <i class="el-icon-menu"></i>
            </a>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleDetail(scope.row, 'detail')">
                <a>详情</a>
              </el-dropdown-item>
              <template v-if="scope.row.lableType !== 0">
                <el-dropdown-item @click.native="handlePrint(scope.row, 'detail')">
                  <a>标签打印</a>
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </e-table>
    <preview-modal ref="previewModal" />
    <print-modal @hideMask="handleHideMask" @showMask="handleShowMask" ref="printModal" />
    <progress-mask ref="progressMask" />
  </div>
</template>

<script>
import PreviewModal from '@/components/PreviewModal'
import PrintModal from './PrintModal'
import ProgressMask from './ProgressMask'
import { infoAll } from '@/api/assetsNew'
import { formatY, stateWord, stateType } from '@/utils/util'

export default {
  components: {
    PreviewModal,
    PrintModal,
    ProgressMask
  },
  data() {
    return {
      tableData: [],
      total: 1,
      loading: false,
      columns: [
        { slot: 'selection' },
        {
          label: '资产编码',
          prop: 'assetsCode',
          width: '130px',
          align: 'left',
          fixed: 'left'
        },
        {
          label: '资产名称',
          prop: 'assetsName',
          tooltip: true,
          align: 'left',
          width: '220px',
          fixed: 'left'
        },
        {
          label: '资产类别',
          prop: 'categoryName'
        },
        { slot: 'state' },
        {
          label: '使用部门',
          prop: 'useDept'
        },
        {
          label: '区域',
          width: '140px',
          prop: 'areaName'
        },
        {
          label: '使用人',
          prop: 'useUser'
        },
        {
          label: '供应商',
          prop: 'supplier',
          tooltip: true,
          align: 'left',
          width: '220px'
        },
        {
          label: '生产厂家',
          prop: 'factory',
          tooltip: true,
          align: 'left',
          width: '220px'
        },
        {
          label: '品牌',
          prop: 'brand'
        },
        {
          label: '规格',
          prop: 'specification',
          width: '220px'
        },
        {
          label: '计量单位',
          prop: 'unit',
          float: 'fr'
        },
        { slot: 'buyDate' },
        {
          label: '折旧年限',
          prop: 'serviceLife',
          align: 'right'
        },
        { slot: 'expireDate' },
        {
          label: '资产原值',
          prop: 'price',
          align: 'right'
        },
        {
          label: '资产净值',
          prop: 'nowPrice',
          align: 'right'
        },
        {
          label: '归属部门',
          prop: 'belognDept'
        },
        {
          label: '管理员',
          prop: 'manageUser'
        },
        {
          label: '存放地点',
          prop: 'storageLocation',
          float: 'fl'
        },
        {
          label: '汇总数量',
          prop: 'summaryNumber',
          align: 'right'
        },
        { slot: 'photo' },
        { slot: 'printTime' },
        {
          label: '备注说明',
          width: '200px',
          prop: 'remark',
          align: 'left'
        },
        { slot: 'action' }
      ],
      queryParam: {
        pageSize: 10,
        pageNo: 1,
        isPrint: 2
      },
      selectedRows: [],
      messageStatus: null,
      row: JSON.stringify(this.$route.query) !== '{}' && JSON.parse(this.$route.query.row)
    }
  },
  mounted() {
    if (this.row) {
      // 图表跳转的情况
    } else {
      this.handleGetList()
    }
  },
  methods: {
    handleHideMask() {
      this.$refs.progressMask.hide()
    },
    handleShowMask(num, len) {
      this.$refs.progressMask.show(num, len)
    },
    handlePrintMany() {
      console.log('queryParam', this.queryParam)
      if (this.queryParam.lableType) {
        this.$refs.printModal.edit(this.selectedRows)
      } else {
        this.$message.error('请先选择统一的标签材质')
      }
    },
    handleTableCheck(arr) {
      console.log('arr', arr)

      this.selectedRows = arr
    },
    handlePrint(row) {
      this.$refs.printModal.edit(row)
    },
    formatY(time) {
      return formatY(time)
    },
    stateWord(num) {
      return stateWord(num)
    },
    stateType(num) {
      return stateType(num)
    },
    handlePreview(row) {
      let arr = []
      row.pictureUrl.map(v => {
        arr.push(v.url)
      })
      this.$refs.previewModal.show(arr)
    },
    handleDetail(row) {
      this.$router.push({
        name: 'assetsInfoDetail',
        params: { row }
      })
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign({}, this.queryParam, param)
      const res = await infoAll(this.queryParam)
      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>
